<template>
  <div class="home">
	  <div class="shopcate">商品分类</div>
	  <div class="big_box">
		  <!-- 一级列表 -->
		  <div class="onelist">
			  <div v-for="(item,index) in oneList" @click="changenum(item.id)" :class="item.id==Number1?'active':''">{{item.name}}</div>
		  </div>
		  
		  <!-- 二级列表 -->
		  <div class="secondlist">
			  <div class="secondlist_box" v-for="(item,index) in newshopitem">
				  <div  @click="jumpdelite(item)"><img :src="item.imgs[0]" alt=""></div>
			  	<div>{{item.shopname}}</div>
			  </div>
		  </div>	  
	  </div>
	  
	  <div class="kong"></div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../../components/Tabbar.vue'
import { mapState } from 'vuex'
export default{
	  name: 'Category',
	  data(){
		  return{
			  newshopitem:[],
			  Number1:1,
			  oneList:[
				  {id:1,name:"全部"},
				  {id:2,name:"华为"},
				  {id:3,name:"小米"},
				  {id:4,name:"OPPO"},
				  {id:5,name:"vivo"},
			  ]
			  }
	  },
	  computed:{
	  	//调用vuex从后台获取的数据
	  	...mapState({
	  		shopitem:state=>state.shopitem.shopitem,
	  	})
	  },
	  methods:{
		changenum(id){
			this.Number1=id;
			if(id==1){
				this.newshopitem=this.shopitem;
			}else if(id==2){
				this.newshopitem=[];
				this.shopitem.forEach(item=>{
					if(item.brand=="华为"){
						this.newshopitem.push({
							id:item.id,
							price:item.price,
							type:item.type,
							imgs:item.imgs,
							shopname:item.shopname,
							specification:item.specification,
							brand:item.brand,
							isbool:item.isbool,
							});
					}
				})
			}else if(id==3){
				this.newshopitem=[];
				this.shopitem.forEach(item=>{
					if(item.brand=="小米"){
						this.newshopitem.push({
							id:item.id,
							price:item.price,
							type:item.type,
							imgs:item.imgs,
							shopname:item.shopname,
							specification:item.specification,
							brand:item.brand,
							isbool:item.isbool,
							});
					}
				})
			}else if(id==4){
				this.newshopitem=[];
				this.shopitem.forEach(item=>{
					if(item.brand=="oppo"){
						this.newshopitem.push({
							id:item.id,
							price:item.price,
							type:item.type,
							imgs:item.imgs,
							shopname:item.shopname,
							specification:item.specification,
							brand:item.brand,
							isbool:item.isbool,
							});
					}
				})
			}else{
				this.newshopitem=[];
				this.shopitem.forEach(item=>{
					if(item.brand=="vivo"){
						this.newshopitem.push({
							id:item.id,
							price:item.price,
							type:item.type,
							imgs:item.imgs,
							shopname:item.shopname,
							specification:item.specification,
							brand:item.brand,
							isbool:item.isbool,
							});
					}
				})
			}
		},
		shopIt(){
			this.Number1=1;
			this.newshopitem=this.shopitem;
		},
		jumpdelite(item){
			this.$router.push({
				name: "detali",
				params: {
					id:item.id,
					shopname:item.shopname,
					price:item.price,
					type:item.type,
					imgs:item.imgs,
					specification:item.specification,
					isbool:item.isbool,
					},
			})
		}
	  },
	  components: {
	    Tabbar,
	  },
	  created() {
	  	this.shopIt();
	  }
	}
</script>
<style scoped>
	.kong{
		height: 3.4rem;
	}
	.onelist{
		position: fixed;
		width: 4.125rem;
		margin-top: 1.3rem;
/* 		border: 1px solid red; */
	}
	.onelist div{
		width: 4.125rem;
		height: 2.875rem;
		line-height: 2.875rem;
		background-color: whitesmoke;
		border: 0.0625rem solid grey;
	}
	.secondlist{
		margin-top: 1.3rem;
		margin-left: 4.3rem;;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/* border: 1px solid red; */
	}
	.secondlist_box{
		margin-left: 0.25rem;
		width: 7.7rem;
		border: 1px solid gainsboro;
	}
	.big_box{
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	img{
		width:7rem;
		height:7rem;
	}
	.shopcate{
		/* margin-bottom: 0.75rem; */
		background-color: whitesmoke;
		font-size: 0.9375rem;
		color: black;
		font-weight: bold;
		z-index: 100;
		position: fixed;
		height: 1.8rem;
		line-height: 1.8rem;
		width: 100%;
		margin-top: -0.5rem;
		/* border: 1px solid red; */
	}
	.active{
		color: red;
	}
</style>